<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>referenceline</title>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by jarvisframe -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">



    <style>
        /* prevents selection when left click dragging */
        .disable-selection {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select:none;
            user-select:none;
        }
        /* prevents cursor from changing to the i bar on the overlays*/
        .noIbar {
            cursor:default;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>referenceLine test</h1>
        </div>
        <div class="row">
            <div class="btn-group">
                <button type="button" id="btnload" class="btn btn-default">加载</button>
                <button type="button" id="btnpan" class="btn btn-default">pan</button>
                <button type="button"  id="btn90" class="btn btn-default">旋转</button>
                <button type="button"  id="btnlocal" class="btn btn-default">加载本地</button>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <div class="btn-group-vertical">
                    <div>123</div>
                    <div style="width:256px;height:256px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;"
                         oncontextmenu="return false"
                         class='disable-selection noIbar'
                         unselectable='on'
                         onselectstart='return false;'
                         onmousedown='return false;'>
                        <div id="axial"
                             style="width:256px;height:256px;top:0px;left:0px;position:absolute;overflow:hidden;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-3 col-md-3">

            </div>
            <div class="col-xs-6 col-md-3">
                <div class="btn-group-vertical">
                    <div>123</div>
                    <div style="width:256px;height:256px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;"
                         oncontextmenu="return false"
                         class='disable-selection noIbar'
                         unselectable='on'
                         onselectstart='return false;'
                         onmousedown='return false;'>
                        <div id="coronal"
                             style="width:256px;height:256px;top:0px;left:0px;position:absolute;overflow:hidden;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
    <!-- jquery - currently a dependency and thus required for using jarvisframeWADOImageLoader -->
    <script src="../lib/jquery.min.js"></script>

    <!-- include the hammer.js library for touch gestures-->
    <script src="../lib/hammer.min.js"></script>

    <!-- include the jarvisframe library -->
    <script src="../lib/jarvisframe.js"></script>
    <script src="../lib/jarvisframeMath.js"></script>
    <script src="../lib/dicomParser.js"></script>
    <script src="exampleImageLoader.js"></script>
    <script src="../lib/jarvisframeWADOImageLoader.js"></script>

    <!-- include the jarvisframe tools library -->
    <script src="../lib/jarvisframeTools.js"></script>

    <!-- include special code for these examples which provides images -->
    <!--<script src="exampleMetaDataProvider.js"></script>-->
    <script src="../js/jarvisMetaDataProvider.js"></script>

<script>
    $(document).ready(function(){


        var axialElement = $('#axial').get(0);
        var coronalElement = $('#coronal').get(0);
        var synchronizer = new jarvisframeTools.Synchronizer("jarvisframeNewImage", jarvisframeTools.updateImageSynchronizer);

        var imageIds = [
            'dicomweb://localhost:8081/test/download/9df06b7bd69435c397ec01f3557291d8',
            'dicomweb://localhost:8081/test/download/dfad53c75f4ad6746f63eb606db12250',
            'dicomweb://localhost:8081/test/download/4face11231343e63b0659d7eb5edf1c4'
        ];
        var stack = {
            currentImageIdIndex : 0,
            imageIds: imageIds
        };
        var imageIds2 = [
            'dicomweb://localhost:8081/test/download/8e0d114e7c79f9bc5362fc8c361d9a6b'
        ];

        var stack2 = {
            currentImageIdIndex : 0,
            imageIds: imageIds2
        };

        //加载服务器
        $('#btnload').click(function() {



            console.log(stack);
            jarvisframe.enable(axialElement);
            jarvisframe.enable(coronalElement);
            jarvisframe.loadAndCacheImage(stack.imageIds[0]).then(function(image) {
                console.log('ok1');
                jarvisframe.displayImage(axialElement, image);


            });

            jarvisframe.loadAndCacheImage(stack2.imageIds[0]).then(function(image) {
                // display this image
                jarvisframe.displayImage(coronalElement, image);
                // Add the enabled elements to the synchronization context

                // enable reference Lines tool

                console.log('ok12');
            });
        });
        $('#btnpan').click(function() {
            // set the stack as tool state
            jarvisframeTools.addStackStateManager(axialElement, ['stack', 'referenceLines']);
            jarvisframeTools.addToolState(axialElement, 'stack', stack);
            // Enable all tools we want to use with this element

            jarvisframeTools.mouseInput.enable(axialElement);
            jarvisframeTools.mouseWheelInput.enable(axialElement);
            jarvisframeTools.wwwc.activate(axialElement, 1);
            jarvisframeTools.zoom.activate(axialElement, 4);
            jarvisframeTools.stackScrollWheel.activate(axialElement);
            // Add the enabled elements to the synchronization context
            synchronizer.add(coronalElement);
            synchronizer.add(axialElement);
            // enable reference Lines tool
            jarvisframeTools.referenceLines.tool.enable(axialElement, synchronizer);
            jarvisframeTools.referenceLines.tool.enable(coronalElement, synchronizer);
            console.log('ok1');

        });
        $('#btn90').click(function() {
            var viewport = jarvisframe.getViewport(axialElement);
            viewport.rotation +=90;
            jarvisframe.setViewport(axialElement, viewport);

        });
        //加载本地
        $('#btnlocal').click(function() {

            var axialImageIds = [
                'example://1',
                'example://2'
            ];
            var axialStack = {
                currentImageIdIndex : 0,
                imageIds: axialImageIds
            };
            //var synchronizer = new jarvisframeTools.Synchronizer("jarvisframeNewImage", jarvisframeTools.updateImageSynchronizer);
            // image enable the dicomImage element
            jarvisframe.enable(axialElement);
            jarvisframe.enable(coronalElement);
            // Enable mouse inputs
            jarvisframeTools.mouseInput.enable(axialElement);
            jarvisframeTools.mouseWheelInput.enable(axialElement);
            var axialDeferred = jarvisframe.loadImage(axialImageIds[0]).then(function(image) {
                // display this image
                jarvisframe.displayImage(axialElement, image);
                // set the stack as tool state
                jarvisframeTools.addStackStateManager(axialElement, ['stack', 'referenceLines']);
                jarvisframeTools.addToolState(axialElement, 'stack', axialStack);
                // Enable all tools we want to use with this element
                jarvisframeTools.wwwc.activate(axialElement, 1);
                jarvisframeTools.zoom.activate(axialElement, 4);
                jarvisframeTools.stackScrollWheel.activate(axialElement);
                // Add the enabled elements to the synchronization context
                synchronizer.add(axialElement);
                // enable reference Lines tool
                jarvisframeTools.referenceLines.tool.enable(axialElement, synchronizer);
            });
            var coronalDeferred = jarvisframe.loadImage('example://3').then(function(image) {
                // display this image
                jarvisframe.displayImage(coronalElement, image);
                // Add the enabled elements to the synchronization context
                synchronizer.add(coronalElement);
                // enable reference Lines tool
                jarvisframeTools.referenceLines.tool.enable(coronalElement, synchronizer);
            });

        });
    })
</script>

</html>